<script lang="ts">
  import { boardStore } from "$lib/stores/board.svelte";
  import type { Store as ToastStore } from "@zag-js/toast";
  import { getContext } from "svelte";
  import EditLlmModal from "./EditLlmModal.svelte";
  import { remove_llm, type LlmInfo } from "$lib/api/board/board";
  import RemoveModal from "$lib/components/modal/RemoveModal.svelte";
  import { request } from "$lib/utils/request";
  import { userStore } from "$lib/stores/user.svelte";

  const toast: ToastStore = getContext("toast");

  let showAddModal = $state(false);
  let hoverLlmId = $state("");
  let updateLlmInfo = $state(null as null | LlmInfo);
  let removeLlmInfo = $state(null as null | LlmInfo);

  async function removeLlm() {
    if (removeLlmInfo == null) {
      return;
    }
    await request(
      remove_llm({
        session_id: userStore.userSession,
        board_id: boardStore.curBoardId,
        llm_id: removeLlmInfo.llm_id,
      }),
    );
    toast.create({
      title: "成功",
      description: "删除大模型配置成功!",
      type: "success",
    });
    removeLlmInfo = null;
  }
</script>

<div
  class="card border-[1px] border-surface-200-800 w-full p-0 rounded-[10px] bg-surface-100-900"
>
  <header
    class="border-b-[2px] border-surface-200-800 flex justify-between bg-surface-200-800 pl-2 pr-2 rounded-t-[10px]"
  >
    <h4 class="h4">大模型列表</h4>
    <div>
      <button
        type="button"
        class="btn preset-filled-primary-900-100 rounded-[10px] h-[30px] mt-[4px]"
        disabled={boardStore.curWebBoard?.myMember?.admin != true}
        onclick={() => (showAddModal = true)}>增加</button
      >
    </div>
  </header>

  <div class="table-wrap">
    <table class="table">
      <thead>
        <tr>
          <th class="w-[150px]">名称</th>
          <th class="w-[150px]">Api地址</th>
          <th class="w-[150px]">默认模型</th>
          <th class="w-[150px]">系统提示</th>
          {#if boardStore.curWebBoard?.myMember?.admin == true}
            <th class="w-[120px]">操作</th>
          {/if}
        </tr>
      </thead>
      <tbody>
        {#each boardStore.curWebBoard?.boardInfo?.llm_list ?? [] as llm}
          <tr
            class="hover:preset-tonal h-[50px]"
            onmouseenter={() =>
              setTimeout(() => {
                hoverLlmId = llm.llm_id;
              }, 100)}
            onmouseleave={() => (hoverLlmId = "")}
          >
            <td>{llm.basic_info.name}</td>
            <td class="text-wrap break-all">{llm.basic_info.api_addr}</td>
            <td>{llm.basic_info.default_model_name}</td>
            <td
              ><pre class="text-wrap break-all">{llm.basic_info
                  .system_prompt}</pre></td
            >
            {#if boardStore.curWebBoard?.myMember?.admin == true}
              <td>
                <div class="flex gap-2">
                  <button type="button" onclick={() => (updateLlmInfo = llm)}
                    >修改</button
                  >
                  {#if hoverLlmId == llm.llm_id}
                    <button
                      type="button"
                      class="btn preset-filled-error-200-800"
                      onclick={() => (removeLlmInfo = llm)}>删除</button
                    >
                  {/if}
                </div>
              </td>
            {/if}
          </tr>
        {/each}
      </tbody>
    </table>
  </div>
</div>

<div class="absolute -left-[10000px]">
  {#if showAddModal}
    <EditLlmModal onClose={() => (showAddModal = false)} />
  {/if}
  {#if updateLlmInfo != null}
    <EditLlmModal
      llmInfo={updateLlmInfo}
      onClose={() => (updateLlmInfo = null)}
    />
  {/if}
  {#if removeLlmInfo != null}
    <RemoveModal
      title="删除大模型配置"
      content={`是否删除大模型配置 ${removeLlmInfo.basic_info.name} ?`}
      onCancel={() => (removeLlmInfo = null)}
      onOk={() => removeLlm()}
    />
  {/if}
</div>
